<template>
  <div class="innerPageTable-out-flex">
    <NameSpace @clickNamespace="clickNamespace"></NameSpace>
    <SelfAdaption>
      <Form
        :model="formSearch"
        ref="formRef"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item
          prop="serviceName"
          label="服务名称"
          :rules="{
            required: true,
            message: '请输入服务名称',
            trigger: 'blur'
          }"
        >
          <Input type="text" v-model.trim="formSearch.serviceName" @on-enter="searchInfo"></Input>
        </Form-item>
        <Form-item
          prop="groupName"
          label="分组名称"
          :rules="{
            required: true,
            message: '请输入分组名称',
            trigger: 'blur'
          }"
        >
          <Input type="text" v-model.trim="formSearch.groupName" @on-enter="searchInfo"></Input>
        </Form-item>
        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="searchInfo" />
          <RPButton optType="reset" @click="formReset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="tableRef" :config="pageTableConfig"> </InnerPageTable>
  </div>
</template>

<script>
import API from "@/api/serviceManage";
import { generateColumns } from "./colomns";
export default {
  name: "subscriberIndex",
  components: {},
  props: {},
  data() {
    return {
      formSearch: {
        serviceName: "",
        groupName: "",
        namespaceId: ""
      },
      pageTableConfig: {
        loadDataFn: this.getListPage,
        columns: generateColumns.bind(this)(),
        autoFirst: false,
        initParam: {
          serviceName: "",
          groupName: "",
          namespaceId: ""
        }
      }
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    clickNamespace(val) {
      this.formSearch.namespaceId = val;
    },
    init() {
      let { name = "", groupName = "", namespaceId = "" } = this.$route.query;
      if (name) {
        this.formSearch.serviceName = name;
        this.formSearch.groupName = groupName;
        this.formSearch.namespaceId = namespaceId;
        this.searchInfo();
      }
    },
    getListPage (tableObj) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          let { responseProcess, param } = tableObj;
          return API.getListPage(param).then(data => {
            responseProcess(data);
          });
        } else {
          this.$refs.tableRef.loading = false
        }
      });
    },
    // 搜索查询
    searchInfo() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.$refs["tableRef"].load(this.formSearch);
        }
      });
    },
    // 搜索重置
    formReset() {
      this.$refs["formRef"].resetFields();
      this.$refs["tableRef"].resource = [];
      this.$refs["tableRef"].loadLocal();
    }
  },
  computed: {},
  watch: {}
};
</script>

<style lang='less' scoped >
</style>
